// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 公告栏关闭按钮
    const closeBtn = document.querySelector('.announcement .icon-close');
    if (closeBtn) {
        closeBtn.addEventListener('click', function() {
            document.querySelector('.announcement').style.display = 'none';
        });
    }

    // 导航标签切换
    const navTabs = document.querySelectorAll('.nav-tab');
    const mainCategoryTabs = document.getElementById('category-tabs-container');
    const changeBgTabs = document.getElementById('change-bg-tabs');
    const horoscopeTabs = document.getElementById('horoscope-tabs');
    
    navTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 更新激活标签
            navTabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            
            const tabText = this.textContent.trim();
            console.log(`选择了: ${tabText}`);
            
            // 隐藏所有内容
            document.querySelectorAll('.product-list, .wardrobe-container, .horoscope-container').forEach(el => el.style.display = 'none');
            
            // 处理分类标签显示
            if (tabText === '星座运势') {
                mainCategoryTabs.style.display = 'none';
                changeBgTabs.style.display = 'none';
                horoscopeTabs.style.display = 'flex';
            } else if (tabText === '换脸' || tabText === '我的衣橱') {
                // 这些页面没有分类标签
                mainCategoryTabs.style.display = 'none';
                changeBgTabs.style.display = 'none';
                horoscopeTabs.style.display = 'none';
            } else if (tabText === '换背景') {
                // 换背景有特定分类标签
                mainCategoryTabs.style.display = 'none';
                changeBgTabs.style.display = 'flex';
                horoscopeTabs.style.display = 'none';
            } else {
                // 其他页面使用常规分类标签
                mainCategoryTabs.style.display = 'flex';
                changeBgTabs.style.display = 'none';
                horoscopeTabs.style.display = 'none';
            }
            
            // 根据选择的标签显示对应内容
            switch (tabText) {
                case '星座运势':
                    document.getElementById('horoscope-content').style.display = 'block';
                    break;
                case '全部商品':
                    document.getElementById('all-products').style.display = 'flex';
                    break;
                case '换背景':
                    document.getElementById('background-list').style.display = 'flex';
                    break;
                case '换脸':
                    document.getElementById('face-change-list').style.display = 'flex';
                    break;
                case '我的衣橱':
                    document.getElementById('my-wardrobe').style.display = 'block';
                    break;
            }
        });
    });

    // 分类标签切换
    const categoryTabs = document.querySelectorAll('.category-tab');
    categoryTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            categoryTabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // 喜欢按钮点击
    const favoriteBtn = document.querySelector('.favorite-icon');
    if (favoriteBtn) {
        favoriteBtn.addEventListener('click', function() {
            this.classList.toggle('active');
            const text = this.nextElementSibling;
            if (text) {
                text.classList.toggle('active');
            }
        });
    }

    // 星座运势相关功能
    initHoroscope();
});

// 星座运势功能初始化
function initHoroscope() {
    const birthdayPicker = document.getElementById('birthday-picker');
    const checkHoroscopeBtn = document.getElementById('check-horoscope-btn');
    const savedBirthdaySpan = document.getElementById('saved-birthday');
    const userSignSpan = document.getElementById('user-sign');
    
    // 从本地存储加载保存的生日和星座
    const savedBirthday = localStorage.getItem('userBirthday');
    const userSign = localStorage.getItem('userSign');
    if (savedBirthday) {
        savedBirthdaySpan.textContent = formatDate(new Date(savedBirthday));
        birthdayPicker.value = savedBirthday.split('T')[0]; // 设置日期选择器的值
    }
    if (userSign) {
        userSignSpan.textContent = userSign;
        // 如果有保存的生日和星座，自动加载今日运势
        loadHoroscope(userSign);
    }
    
    // 查看星座运势按钮点击事件
    if (checkHoroscopeBtn) {
        checkHoroscopeBtn.addEventListener('click', function() {
            const birthday = birthdayPicker.value;
            if (!birthday) {
                alert('请选择您的生日');
                return;
            }
            
            // 计算星座
            const sign = calculateZodiacSign(birthday);
            
            // 保存到本地存储
            localStorage.setItem('userBirthday', birthday);
            localStorage.setItem('userSign', sign);
            
            // 更新界面
            savedBirthdaySpan.textContent = formatDate(new Date(birthday));
            userSignSpan.textContent = sign;
            
            // 加载星座运势
            loadHoroscope(sign);
        });
    }
}

// 根据生日计算星座
function calculateZodiacSign(birthdayStr) {
    const date = new Date(birthdayStr);
    const month = date.getMonth() + 1; // 月份从0开始，所以要+1
    const day = date.getDate();
    
    // 根据月份和日期判断星座
    if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) return "白羊座";
    if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) return "金牛座";
    if ((month === 5 && day >= 21) || (month === 6 && day <= 21)) return "双子座";
    if ((month === 6 && day >= 22) || (month === 7 && day <= 22)) return "巨蟹座";
    if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) return "狮子座";
    if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) return "处女座";
    if ((month === 9 && day >= 23) || (month === 10 && day <= 23)) return "天秤座";
    if ((month === 10 && day >= 24) || (month === 11 && day <= 22)) return "天蝎座";
    if ((month === 11 && day >= 23) || (month === 12 && day <= 21)) return "射手座";
    if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) return "摩羯座";
    if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) return "水瓶座";
    if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) return "双鱼座";
    
    return "未知";
}

// 格式化日期为"yyyy年MM月dd日"的形式
function formatDate(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始，所以要+1
    const day = date.getDate();
    return `${year}年${month}月${day}日`;
}

// 加载星座运势
function loadHoroscope(sign) {
    // 设置星座图标
    const signIcon = document.getElementById('sign-icon');
    const signMapping = {
        "白羊座": "aries",
        "金牛座": "taurus",
        "双子座": "gemini",
        "巨蟹座": "cancer",
        "狮子座": "leo",
        "处女座": "virgo",
        "天秤座": "libra",
        "天蝎座": "scorpio",
        "射手座": "sagittarius",
        "摩羯座": "capricorn",
        "水瓶座": "aquarius",
        "双鱼座": "pisces"
    };
    signIcon.setAttribute('data-sign', signMapping[sign] || "leo");
    
    // 模拟星座运势数据（实际项目中应从API获取）
    const horoscopeData = {
        "name": sign || "狮子座",
        "datetime": new Date().toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(/\//g, '年').replace(/\//g, '月') + '日',
        "date": parseInt(new Date().toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit'}).replace(/\D/g, '')),
        "all": Math.floor(Math.random() * 30 + 70), // 70-99的随机数
        "color": ["古铜色", "淡粉色", "湖蓝色", "薰衣草紫", "天蓝色", "珊瑚红", "杏色", "薄荷绿", "柠檬黄", "玫瑰金"][Math.floor(Math.random() * 10)],
        "health": Math.floor(Math.random() * 30 + 70),
        "love": Math.floor(Math.random() * 30 + 70),
        "money": Math.floor(Math.random() * 30 + 70),
        "number": Math.floor(Math.random() * 9 + 1),
        "QFriend": ["白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座", "水瓶座", "双鱼座"][Math.floor(Math.random() * 12)],
        "summary": "今天你的情绪会有些起伏，可能受到外界因素的影响而心神不宁。在工作上可能会有意想不到的惊喜，某个项目终于有了突破性进展。财务方面需要谨慎，避免冲动消费。感情上与伴侣有深入交流的机会，可以更好地了解彼此。身体状况良好，但要注意保持充足的睡眠。",
        "work": Math.floor(Math.random() * 30 + 70),
        "error_code": "0"
    };
    
    // 填充运势数据到界面
    document.getElementById('sign-name').textContent = horoscopeData.name;
    document.getElementById('horoscope-date').textContent = horoscopeData.datetime;
    
    // 设置各个指数条
    setIndexBar('all-index', 'all-value', horoscopeData.all);
    setIndexBar('health-index', 'health-value', horoscopeData.health);
    setIndexBar('love-index', 'love-value', horoscopeData.love);
    setIndexBar('money-index', 'money-value', horoscopeData.money);
    setIndexBar('work-index', 'work-value', horoscopeData.work);
    
    // 设置幸运信息
    document.getElementById('lucky-color').textContent = horoscopeData.color;
    document.getElementById('lucky-number').textContent = horoscopeData.number;
    document.getElementById('lucky-sign').textContent = horoscopeData.QFriend;
    
    // 设置今日概述
    document.getElementById('horoscope-summary-text').textContent = horoscopeData.summary;
}

// 设置指数条
function setIndexBar(barId, valueId, value) {
    const bar = document.getElementById(barId);
    const valueElement = document.getElementById(valueId);
    
    if (bar && valueElement) {
        // 给指数条设置宽度，最大为200px
        const width = (value / 100) * 200;
        bar.style.width = `${width}px`;
        valueElement.textContent = value;
    }
} 